<script>
export default {
  inject: ['rootMenu'],
  props: {
    txt: {
      type: String,
    },
    index: String,
    iconClass: String,
  },
  created() {
    this.isFold = this.rootMenu.isFold
  },
  mounted() {
    this.$nextTick(() => {
      if (Object.entries(this.$slots).length) {
        this.isShowChild = true
      }
    })
    setTimeout(() => {
      // 在渲染后加上动画, 不然每次初始化时, icon都会转圈
      if (this.isShowChild) {
        this.$refs.icon2.style.transition = 'transform 0.3s ease-in-out'
      }
    }, 0)
  },
  data() {
    return {
      isOpen: false,
      isFold: true,
      currTip: false,
      isShowChild: false,
    }
  },
  methods: {
    open() {
      if (this.isOpen && !this.isShowChild) {
        return
      }
      if (this.index) {
        this.$router.push({ path: this.index })
      }
      this.isOpen = !this.isOpen
      if (this.rootMenu.keepOneOpen) {
        this.rootMenu.closeOtherGroup(this.txt)
      }
      if (!this.isShowChild) {
        this.$nextTick(() => {
          this.isOpen = true
        })
      }
    },
  },
}
</script>
<template>
  <div class="menu-main">
    <div
      class="title-item"
      @mouseleave="currTip = false"
      @mouseenter="currTip = true"
      @click="open"
    >
      <div
        class="rightTip"
        :style="{marginTop: `${-rootMenu.scrollTop}px`}"
        v-show="!rootMenu.isFold && currTip"
      >
        <div>
          <span class="tiptxt">{{txt}}</span>
        </div>
      </div>
      <div class="submenu__title" :class="{isOpen : isOpen}">
        <span class="icon" :class="iconClass"></span>
        <span class="name" :class=" rootMenu.isFold ? '':'hide'">{{txt}}</span>
        <span
          class="icon2"
          ref="icon2"
          v-if="isShowChild"
          :class="{isOpen:isOpen, [rootMenu.arrowClass]:true, onlyOne:$refs.subs&&$refs.subs.children.length===1  }"
        ></span>
      </div>
    </div>
    <div class="subs" ref="subs" :class="isOpen ? 'open' : 'close'">
      <slot></slot>
    </div>
  </div>
</template>


<style lang="stylus" >
.hide
  display none
.rightTip
  position fixed
  background #222
  z-index 10
  left 60px
  box-sizing border-box
  color #fff
  padding 0 10px
  font-size 13px
  border-radius 5px
  .tiptxt
    &::before
      content ' '
      position absolute
      left -18px
      top 10px
      width 20px
      height 20px
      border 10px solid transparent
      border-right 8px solid #222
      box-sizing border-box
.menu-main
  width 100%
  font-size 16px
  background #42485b
  line-height 40px
  cursor pointer
  .icon
    margin 0 20px 0 10px
    font-size 20px
  .title-item
    .submenu__title.isOpen
      background #373e54
      color #ff7068
    &:hover
      background #5a5a5a
  .icon2
    font-size 12px
    margin 0 15px 0 15px
    float right
    margin 14px
    // transition transform 0.3s ease-in-out
    &.isOpen
      transform rotate(90deg)
      &.onlyOne
        // visibility hidden
  .subs
    width 200px
    transition all 0.5s ease-in-out
  .close
    display none
    // height 0px
  .open
    display block
    // height 150px
</style>
